<template>
    <!--<ul class = "dataBaseTree">
        <li v-for= "(item,index) in folder" :key = "index">
            <span :class = "{'active':currentId == item.id}"  @click="findcheck(item)">
              <i v-if="item.children" class="iconfont" :class="open?'icon-plus':'icon-jiajian'"></i>
              <i v-if="!item.children" class="iconfont icon-xiala"></i>
                {{ item.text }}
            </span>
                <tree v-if = "item.children" :folder = "item.children" :select = "select" :currentId = "currentId"></tree>
        </li>
    </ul>-->
  <li class = "dataBaseTree">
        <span @click="toggle(data,$event)" v-if="data.text" :class = "{'active':currentId == data.id}" style="width: 15rem;display: inline-block">
            <i v-if="hasChild" class="iconfont" style="color:#5484ff" :class="open?'icon-jian':'icon-jiahao '"></i>
            <i v-else="!hasChild" class="iconfont" style="color: #5484ff" :class="!open?'icon-jiahao':'icon-jian '"></i>
          <!--  <em v-if="!hasChild" class="iconfont" style="color: #1296db" :class="open?'icon-jian':'icon-jiahao '"></em>-->
            {{ data.text }}
        </span>
        <span v-else>
           <!--<i class="iconfont icon-xiazai"></i>-->
            <img v-if="data.photo!=null" :src="data.photo" class="photo">
            <img v-if="data.photo==null" src="@/assets/images/img/set_person.png" class="photo">
            <a  style="color: #333;width: 126px;display: inline-block;font-size: 14px">{{ data.name }}</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a
          :href="'tel://'+data.contactWay" style="color:#333;font-size: 14px">{{data.contactWay}}</a>
        </span>
   <!--   <ul v-show="open" v-if="hasChild&&!data.children[0].name">
        <tree v-for="(item, index) in data.children" :data="item" :ifOpen="ifOpen" :key="index"></tree>
      </ul>-->
      <ul v-for="(item, index) in data.children">
        <tree v-show="open" :data="item" :if-open="ifOpen" :key="index"></tree>
      </ul>
  </li>
</template>

<script>
  import {queryAppPerson} from '@/service/getData'
  import {getStore,getDefault} from '@/assets/config/mUtils';
  import { Dialog,Toast } from 'vant';
    export default{
        name:"tree",
        //props:["data","ifOpen"],
      props:{
        data: {
          type: Object,
          default () {}
        },
        ifOpen:{
          type: Boolean,
          default: () => false
        }
      },
        data(){
            return{
                addParams:{
                    label:"",
                    children:[]
                },
                noteData:{
                    children:[]
                },
                open: false,
                currentId:'',
                fopen:false,
            }
        },
      created(){
        this.open =  this.ifOpen;
//        this.fopen = this.ifOpen;
      },
      mounted(){
        //console.log(this.ifOpen)
        //this.fopen = this.ifOpen;
      },
      computed: {
        hasChild() {
          return this.data.children && this.data.children.length
        },

      },
      watch:{
       /* fopen:{
          handler(val,oldVal){
//            console.log(val,oldVal);
            this.fopen = this.ifOpen;
            if(val == true){
              this.open = val;
            }
          },
          deep:true //深度监听
          /!*console.log(val,oldVal);
          if(val == true){
            this.open = val;
          }*!/
        },*/
        ifOpen:function (val,oldVal) {
          this.fopen = val;
          this.open = val;
        }
      },
        methods:{
          toggle(data,event){
            Toast.loading({
              duration: 0,   // 持续展示 toast
              mask: true,
              message: '正在加载...'
            });
            //console.log(data);
            if(data.children.length>0){
              if(this.hasChild) {
                /*if(data.children[0].pid&&data.name){
                  this.fopen = !this.fopen;
                }*/
                this.open = !this.open;
              }
            }else {
              this.open = true;
            };
            if(data.pid == "-1"){
              return true;
            };
            if(!this.ifOpen){
              //console.log(data);
              if(event.target.className !=''){
                Toast.clear();
                return;
              }
              event.target.className ="loaded ";
              //console.log(data);
              var defaultdata = {};
              defaultdata.id = data.treeId;
              defaultdata.app_userId = getStore('user_id');
              defaultdata.CHECK_TIME = new Date().getTime().toString();
              defaultdata.CHECK_SIGN = this.$md5(defaultdata.app_userId + defaultdata.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
              //var treeId= '0001000200080003';
              queryAppPerson(defaultdata).then(res=>{
                var queryPersons = res.data.appPersonVos;
                if(queryPersons.length!=0){
                  if(this.data.children.length){
                    this.currentId = data.id;
                    for(let i=0 ;i<queryPersons.length;i++){
                      var curImg = queryPersons[i].photo;
                      var checkImg = new Image();
                      checkImg.src = curImg;
                      let thatImg = queryPersons[i];
                      checkImg.onerror = function () {
                        thatImg.photo = null;
                      }
                      this.data.children.push(thatImg);//unshift

                    };
                    Toast.clear();
                  }else {
                    //console.log(this.data,"123213213");
                    //this.data["children"] = [];
                    this.currentId = data.id;
                    for(let i=0 ;i<queryPersons.length;i++){
                      var curImg = queryPersons[i].photo;
                      var checkImg = new Image();
                      checkImg.src = curImg;
                      let thatImg = queryPersons[i];
                      checkImg.onerror = function () {
                        thatImg.photo = null;
                      }
                      this.data.children.push(thatImg);
                    };
                    Toast.clear();
                  }
                }else{
                  Toast.clear();
                }

              });
            }else {
              Toast.clear();
            };


          },
          changeopen(){
            //console.log(this.ifOpen)
            this.open = this.ifOpen;
          }
        }
    }
</script>

<style lang="scss" scoped>
    .dataBaseTree{
        padding-left:3%;
        line-height:40px;
        font-size: 14px;
        ul{
            padding-left:0%;
            line-height:40px;
            li{
                span{
                    display:inline-block;
                    padding-left:10%;
                    height:100%;
                    width:120%;
                    color:#333;
                    font-size:14px;
                    position: relative;
                    cursor: pointer;
                    &:hover{
                        background: #EDF0F5;
                    }
                    .folderIcon{
                        color:#BCBCBC;
                        position: absolute;
                        top:-1px;
                        left:22px;
                    }
                }
            }
        }
        li{
            position: relative;
            span{
                display:inline-block;
                padding-left:40px;
                font-size:14px;
                height:100%;
                width:120%;
                cursor: pointer;
                position: relative;
                right:25px;
                top:-2px;
                color:#ababab;
                &:hover{
                    background: #EDF0F5;
                }
                .titleIcon{
                    color:#C3C3C3;
                    font-size:16px;
                    position: absolute;
                    top:12px;
                    left:16px;
                }
                .folderIcon{
                    color:#BCBCBC;
                    position: absolute;
                    top:-1px;
                    left:22px;
                }
            }
            .active{
                //background: #EDF0F5;
              color: #5484ff;
            }
        }
    }
  .photo{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    float: left;
    margin-top: 8px;
    margin-right: 3px;
  }
</style>
